import React from 'react'
import type { FormProps } from 'antd';
import { Button, Checkbox, DatePicker, Form, Input, Select } from 'antd';
import Search from 'antd/es/transfer/search';

function Top() {

    const onFinish = (values) => {
        console.log('Success:', values);
    };



    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };
    const { RangePicker } = DatePicker;


   
    return (
        <div>
            <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ minWidth: 600, padding: 0, margin: 0, display: 'flex', 'flex-wrap': 'wrap' }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"

            >
                <Form.Item style={{ width: '25%', margin: '10px 2%' }}
                    label="集合编号"
                >
                    <Input placeholder="请输入集合编号" />
                </Form.Item>

                <Form.Item style={{ width: '25%', margin: '10px 2%' }}
                    label="集合名称"
                >
                    <Input placeholder="请输入集合名称" />
                </Form.Item>

                <Form.Item style={{ width: '25%', margin: '10px 2%' }}
                    label="内容体载"
                >
                    <Select
                        defaultValue="全部"
                        style={{ width: 120 }}
                        onChange={handleChange}
                        options={[
                            { value: 'jack', label: '全部' },
                            { value: 'lucy', label: 'ID' },
                            { value: 'Yiminghe', label: '标题' },
                            { value: 'disabled', label: '文章内容', },
                        ]}
                    />
                </Form.Item>

                {/* <Form.Item style={{ width: '5%', margin: '10px 0' }}
                    label="搜索"
                >
                    <Search
                        placeholder="input search text"
                        allowClear
                        enterButton="查询"
                        size="large"
                        onSearch={onSearch}
                    />
                </Form.Item> */}

                <Form.Item style={{ width: '25%', margin: '10px 2%' }}
                    label="筛选方式"
                >
                    <Select
                        defaultValue="全部"
                        style={{ width: 120 }}
                        onChange={handleChange}
                        options={[
                            { value: 'jack', label: '全部' },
                            { value: 'lucy', label: 'ID' },
                            { value: 'Yiminghe', label: '标题' },
                            { value: 'disabled', label: '文章内容', },
                        ]}
                    />
                </Form.Item>

                <Form.Item style={{ width: '25%', margin: '10px 2%' }}
                    label="创建时间"
                >
                    <RangePicker />
                </Form.Item>

                <Form.Item style={{ width: '25%', margin: '10px 2%' }}
                    label="状态"
                >
                    <Select
                        defaultValue="全部"
                        style={{ width: 120 }}
                        onChange={handleChange}
                        options={[
                            { value: 'jack', label: '全部' },
                            { value: 'lucy', label: 'ID' },
                            { value: 'Yiminghe', label: '标题' },
                            { value: 'disabled', label: '文章内容', },
                        ]}
                    />
                </Form.Item>



                {/* <Form.Item style={{ width: '5%', margin: '10px 0' }}

                >
                    <Button>重置</Button>
                </Form.Item> */}

            </Form>
        </div>
    )
}

export default Top
